<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天页面</title>
    <link rel="stylesheet" href="/static/css/websocket.css">
</head>
<body style="background-color: #eeeeee;">
<div class="container">
    <div class="header">
        <div class="info">

        </div>
    </div>
    <div class="main">
        <div class="slider">
            <ul class="chat-list">

            </ul>
        </div>
        <div class="content">
            <div class="message" id="message">
                <ul class="message-list" id="message_list">

                </ul>
            </div>
            <div class="input-message">
                <div class="tools">
                    <ul>
                        <li><img src="/static/images/emoji.png" alt="" width="30px" id="face_btn"></li>
                        <li style="display: none;">
                            <input type="file" name="upload-image" id="upload_image" style="display: none;"
                                   accept="image/*">
                            <img src="/static/images/image.png" alt="" width="30px" id="upload_image_button">
                        </li>
                        <li>
                            <span class="file-area-span">
                                <input type="file" name="upload-file" id="upload_file"
                                       style="display: none;" accept="*/*">
                            </span>
                            <img src="/static/images/file.png" alt="" width="30px" id="upload_file_button">
                        </li>
                    </ul>
                </div>
                <div class="textarea">
                    <prev class="msg-content" id="msg-content" contenteditable></prev>
                </div>
                <div class="button">
                    <a class="send" href="javascript:;" id="send">提交</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</div>

<div class="face hidden">
    {volist name="face" id="v"}
    <div class="face-item"><img src="/{$v}" alt="" id="_face" data="{$key}"></div>
    {/volist}
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src='/static/layer/layer.js'></script>
<script src='/static/js/websocket.js'></script>
<script>

    console.log(window.location)
    var data = {key:1};
    Object.defineProperty(data, "key", {
        set: function(value) {
            console.log(value)
        }
    });
    window.onload = function(){
        data.key = 2;
        data.key = 3;
    }
    $('#face_btn').click(function () {
        $('.face').removeClass('hidden').css({
            bottom: $(window).height() - $(this).offset().top + 20,
            left: $(this).offset().left
        });
    })

   /* websocketIm.setIdentity('{$token}');
    websocketIm.initialize(window.location.hostname, 9501);*/
</script>
</html>
